<template>
  <div class="milestone-step-comp">
    <div
      class="step-container"
      :style="{
        width: stepWidth
      }">
      <div
        v-for="(item, index) in stepList"
        :key="index"
        :style="{
          width: String(width).replace('px', '') + 'px'
        }"
        class="step-item">
        <div class="title">{{ item.milepostName }}</div>
        <div class="index">{{ index + 1 }}</div>
        <div class="plan-time">计划 &nbsp;&nbsp;{{ item.planTime }}</div>
        <div class="point-time-desc">
          <span class="str">{{ setDesc(item.pointTimeDesc, item).str }}</span>
          <span class="day">{{ setDesc(item.pointTimeDesc, item).day }}</span>
          <span class="str" v-if="setDesc(item.pointTimeDesc, item).day">天</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    stepList: {
      type: Array,
      default: () => ([])
    },
    width: {
      type: Number,
      default: 300
    }
  },
  data() {
    return {
      // 未完成（1：已超节点，2：距今还有）完成（3：正常完成，4：超时，5：提前）
      flagTypes: {
        '1': '已超节点',
        '2': '距今还有',
        '3': '正常完成',
        '4': '超时',
        '5': '提前',
      }
    };
  },
  computed: {
    stepWidth() {
      const len = this.stepList.length;
      return len ? `${len * this.width}px` : '100%';
    }
  },
  methods: {
    setDesc(str, row) {
      const { pointTimeFlag } = row;
      const result = {
        str: '',
        day: ''
      };
      const reg = /(\d+)/g;
      const dayArr = str.match(reg);
      if (Array.isArray(dayArr) && dayArr.length) {
        result.day = pointTimeFlag === '3' ? '' : dayArr[0];
      }
      result.str = this.flagTypes[pointTimeFlag] || '';
      return result;
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/main';

  .milestone-step-comp {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    .step-container {
      height: 100%;
      margin: 0 auto;
      .step-item {
        height: 100%;
        float: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        > div {
          margin: 5px 0;
        }
        .index {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
          font-weight: bold;
          border: 2px solid #fff;
        }
        .plan-time {
          background: rgba(255, 255, 255, .3);
          width: 200px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: $mainColor;
          border-radius: 4px;
        }
        .point-time-desc {
          display: flex;
          justify-content: center;
          align-items: center;
          .day {
            color: red;
            font-size: 20px;
            font-weight: bold;
            margin: 0 5px;
          }
        }
      }
    }
  }

</style>
